<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itheima.com/common/"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + path + "/";
%>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">角色</h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<a href="#" class="btn btn-primary" data-toggle="modal"
   data-target="#newCustomerDialog" onclick="clearCustomer()">新建</a>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">角色信息列表</div>
            <!-- /.panel-heading -->
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>角色ID</th>
                    <th>角色名称</th>
                    <th>角色描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${roles}" var="role">
                    <tr>
                        <td>${role.role_id}</td>
                        <td>${role.role_name}</td>
                        <td>${role.role_desc}</td>
                        <td>
                            <a href="#" class="btn btn-primary btn-xs" data-toggle="modal"
                               data-target="#customerEditDialog" onclick="editUser(${role.role_id})">修改</a>
                            <a href="#" class="btn btn-danger btn-xs" onclick="deleteCustomer(${role.role_id})">删除</a>
                            <a href="#" class="btn btn-danger btn-xs"
                               data-toggle="modal"
                               data-target="#customerEditDialog"
                               onclick="assign(${role.role_id})">分配权限</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
</div>
<!-- 客户列表查询部分 end-->

<!-- 创建客户模态框 -->

<!-- 修改客户模态框 -->
<div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">分配权限</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="role_id" name="role_id">
                <ul id="roleTree" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateRole()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!--zTree -->
<link href="<%=basePath%>zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>zTree/js/jquery.ztree.core.js"></script>
<script src="<%=basePath%>zTree/js/jquery.ztree.excheck.js"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    // 通过id获取修改的客户信息
    function assign(id) {
        $("#role_id").val(id);
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath }/role/getZtree.action",
            data: {"id": id},
            success: function (data) {
                // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
                var zNodes = data
                zTreeObj = $.fn.zTree.init($("#roleTree"), setting, zNodes);
            }
        });
    }

    // 执行修改客户操作
    function updateRole() {
        var treeObj = $.fn.zTree.getZTreeObj("roleTree");
        var nodes = treeObj.getCheckedNodes(true);
        console.log(treeObj);
        console.log(nodes);
        var rights='';
        for (let i = 0; i <nodes.length; i++) {
            rights+=nodes[i].id+",";
        }
        $.post("${pageContext.request.contextPath }/role/saveRoleRight.action",
             {
                "id":$("#role_id").val(),
                 "rights":rights
             },
            function (data) {
            if (data == "OK") {
                alert("权限更新成功！");
                $("#customerEditDialog").hide();
                $(".modal-backdrop").hide();
            } else {
                alert("权限更新失败！");
                $("#customerEditDialog").hide();
                $(".modal-backdrop").hide();
            }
        });
    }


</script>
</body>
</html>